@import "m_reset.scss";
@import url(http://at.alicdn.com/t/c/font_3635207_veprhlfwqpj.css);

@function getvw($w){
    @return ($w  /750)*100 + vw
}

.wrap{
    header{
        nav{
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding-top: getvw(48);
            .return{
                width: getvw(123);
                height: getvw(57);
                background-color: white;
                border: 1px solid #ff9344;
                border-radius: 20px;
                font-size: getvw(30);
                margin-left: getvw(23);
            }
            select{
                border: 1px solid #ff9344;
                margin-right: getvw(23);
            }
        }
        .inquire{
            display: flex;
            justify-content: center;
            input{
                width: getvw(266);
                height: getvw(51);
                border: 1px solid #ff9344;
                border-radius: 20px;
            }
        }
        .writing{
            display: flex;
            justify-content: center;
            p{
                font-size: getvw(40);
                font-weight: bold;
                padding-top: getvw(33);
            }
        }
        .form{
            display: flex;
            justify-content: center;
            padding-top: getvw(20);
            tr{
                th{
                    width: getvw(125);
                    height: getvw(64);
                    color: #898989;
                    background-color: #dcdcdc;
                }
            }
        }
    }
    main{
        .hot{
            display: flex;
            justify-content: space-between;
            padding-top: getvw(20);
            padding-left: getvw(20);
            padding-right: getvw(20);
            p{
                font-size: getvw(30);
                i{
                    color: #ff9344;
                }
            }
            p:nth-of-type(2){
                font-size: getvw(24);
            }
        }
        .cate{
            display: flex;
            justify-content: center;
            padding-top: getvw(20);
            .cate1{
                width: getvw(280);
            }
            .cate2{
                width: getvw(420);
                height: getvw(352);
                display: flex;
                flex-wrap: wrap;
                img{
                    width: getvw(420);
                    height: getvw(147);
                    margin: getvw(3);
                }
                img:nth-of-type(2){
                    width: getvw(195);
                    height: getvw(197);
                }
                img:nth-of-type(3){
                    width: getvw(211);
                    height: getvw(197);
                }
            }
        }
        .recommend{
            display: flex;
            justify-content: space-between;
            padding-top: getvw(20);
            padding-left: getvw(20);
            padding-right: getvw(20);
            p{
                font-size: getvw(30);
                i{
                    color: #ff9344;
                }
            }
            p:nth-of-type(2){
                font-size: getvw(24);
            }
        }
        .film{
            padding-top: getvw(30);
            display: flex;
            justify-content: space-evenly;
            .poster{
                margin: getvw(10);
            }
        }
    }
    footer{
        position: fixed;
        bottom: 0;
        width: 100%;
        .nav{
            ul{
                width: 100%;
                display: flex;
                justify-content: space-evenly;
                li{
                    i{
                        color: #ff9344;
                        font-size: getvw(50);
                    }
                    
                    p{
                        color: #000;
                        font-size: getvw(30);
                    }
                }
            }
        }
    }
}